<template>
  <div class="legalProvisions">
      <div style="width: 1200px;padding: 20px 0;margin: 0 auto;">
        <a-breadcrumb separator=">">
            <a-breadcrumb-item href="" @click.native="$router.push('/')">首页</a-breadcrumb-item>
            <a-breadcrumb-item style="color:#FFBE37;">关于我们</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="companycontent">
          <div class="left">
              <p class="gstitle">- 法律条款 -</p>
              <p class="tabs" :class="{active:user}" @click="(e)=>{tab(e)}">用户协议</p>
              <p class="tabs" :class="{active:!user}" @click="(e)=>{tab(e)}">隐私协议</p>
              <!-- <p class="tabs" @click="(e)=>{tab(e)}">法律声明</p>
              <p class="tabs" @click="(e)=>{tab(e)}">支付协议</p> -->
          </div>
          <div class="right">
              <router-view />
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            user:null
        }
    },
    mounted(){
        // console.log(this.$route)
        if(this.$route.fullPath === '/legalProvisions/privacy'){
            this.user = false;
        }else if(this.$route.fullPath === '/legalProvisions/userAgreement'){
            this.user = true;
        }
    },
    methods:{
        tab(e){
            document.querySelector('.active').classList.remove('active');
            e.target.classList.add('active');
            if(e.target.innerText == '用户协议'){
                this.$router.push('/legalProvisions/userAgreement')
            }else if(e.target.innerText == '隐私协议'){
                this.$router.push('/legalProvisions/privacy')
            }else if(e.target.innerText == '法律声明'){
                this.$router.push('/legalProvisions/law')
            }else if(e.target.innerText == '支付协议'){
                this.$router.push('/legalProvisions/payment')
            }
        }
    }
}
</script>

<style scoped lang="less">
    .legalProvisions{
        background-color: #F5F5F5;
        min-height: calc(100vh - 284px);
        .companycontent{
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            padding-bottom: 50px;
            .left{
                width: 210px;
                height: 250px;
                .gstitle{
                    width: 100%;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    color: #333333;
                    background-color: #FFBE37;
                    font-size: 18px;
                }
                .tabs{
                    display: block;
                    cursor: pointer;
                    width: 100%;
                    height: 50px;
                    color: #333333;
                    line-height: 50px;
                    padding-left: 30px;
                    background-color: #FFFFFF;
                    border-bottom: 2px solid #F5F5F5;
                }
                .active{
                    color: #FFBE37;
                    background: #FEF4EC;
                    font-weight: bold;
                    border-bottom: 2px solid #eeeeee;
                }
            }
            .right{
                width: 971px;
                min-height: 500px;
                background-color: #ffffff;
                padding: 40px;
            }
        }
    }
</style>